/* eslint-disable consistent-return */
/* eslint-disable no-param-reassign */
/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownOutlined,
  PlusOutlined,
  UpOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Input,
  Table,
  Select,
  message,
  Modal,
  Row,
  Col,
  Tabs,
  Badge,
  Spin,
  Menu,
  Divider,
  Dropdown,
} from 'antd';
import router from 'umi/router';
import styles from '@/utils/utils.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Authorized from '@/utils/Authorized';
import HOCSelect from '@/components/AntDesign/Select';
import { checkPermissions } from '@/utils/authority';
import TextOverFlow from '../../components/TextOverFlow';

const { Option } = Select;
const FormItem = Form.Item;
const { confirm } = Modal;
const { TabPane } = Tabs;
@connect(({ publicdata, supplier, loading,login }) => ({
  dictCode: publicdata.dictCode,
  supplierCode: supplier.supplierCode,
  loading: loading.models.supplier,
  activeKey: supplier.activeKey,
  pageData: supplier.pageData,
  formFieldsValue: supplier.formFieldsValue,
  expandForm: supplier.expandForm,
  baseUser: login.baseUser,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
      selectedRowKeys: [],
      SUPPER_TAB: [], // 导航页签
      SUPP_STATUS: [], // 服务状态
    };
    this.formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount = () => {
    const {
      pageData: { pagination },
      location,
      activeKey = '1',
      baseUser: { userType },
      dispatch,
    } = this.props;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['SUPP_TYPE', 'SUPP_STATUS', 'SUPPER_TAB', 'SUPP_TYPE'],
    }).then(dictCode => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictCode.SUPP_STATUS.map(status => {
        const temp = status;
        switch (status.itemCode) {
          case '1':
            temp.statusStyle = 'default'; // 待启用
            break;
          case '2':
            temp.statusStyle = 'success'; // 已启用
            break;
          case '3':
            temp.statusStyle = 'error'; // 已停用
            break;
          default:
            temp.statusStyle = '';
        }
      });
      this.setState({
        SUPPER_TAB:userType===1?dictCode.SUPPER_TAB.sort(sortNumber):dictCode.SUPPER_TAB.sort(sortNumber).filter(i=>i.itemName==='自主开发供应商'),
        SUPP_STATUS: dictCode.SUPP_STATUS.sort(sortNumber),
      });
    });
    // 供应商名称字典
    dispatch({
      type: 'supplier/fetchSupplyCode',
      payload: {
        name: null,
      },
    });
    const { isMenuLink } = location.query;
    if (isMenuLink === 'true') {
      this.resetAndGeLlist(location);
    } else {
      this.getList(userType!==1?"2":activeKey,pagination.current,pagination.pageSize);
    }
  };

  // 获取列表
  getList = (activeKey = '1', currentPage = 1, pageSize = 10, isClear = true) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formFieldsValue = {};
      dispatch({
        type: 'supplier/updateModalData',
        payload: {
          activeKey,
          formFieldsValue: fieldsValue,
        },
      });
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'suppCode') {
          // eslint-disable-next-line no-param-reassign
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (fieldsValue[key] && fieldsValue[key].key) {
          formFieldsValue[key] = fieldsValue[key].key === undefined ? null : fieldsValue[key].key;
        } else {
          formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        }
      });
      const pageArg = { currentPage, pageSize };
      const values = {
        ...formFieldsValue,
        pageArg,
        typeFlag:activeKey,
      };
      dispatch({
        type: 'supplier/fetchList',
        payload: values,
      });
    });
  };

  // 查询列表
  searchList = () => {
    const { dispatch, form, pageData, activeKey } = this.props;
    this.state.selectedRowKeys = [];
    this.state.selectedRows = [];
    form.validateFieldsAndScroll((err, values) => {
      if (err) return;
      // eslint-disable-next-line compat/compat
      const fieldValues = Object.values(values);
      const isHasQuery = fieldValues.some(item => item);
      dispatch({
        type: 'supplier/updateTabListQuery',
        payload: { formFieldsValue: values },
      });
      if (isHasQuery) {
        this.getTabNum();
      } else {
        this.getList(activeKey, pageData.pagination.current, pageData.pagination.pageSize);
      }
    });
  };

  // 查询页签有无数据
  getTabNum = () => {
    const { SUPPER_TAB } = this.state;
    const {
      form,
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) return;
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'suppCode') {
          // eslint-disable-next-line no-param-reassign
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (fieldsValue[key] && fieldsValue[key].key) {
          formFieldsValue[key] = fieldsValue[key].key === undefined ? null : fieldsValue[key].key;
        } else {
          formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        }
      });
      const params = {
        ...formFieldsValue,
      };
      dispatch({
        type: 'supplier/fetchCount',
        payload: params,
      }).then(res => {
        if (res.success && res.data.length) {
          let flag = false;
          const sortNumber = (a, b) => a.suppTab - b.suppTab;
          SUPPER_TAB.map(item => {
            const temp = item;
            res.data.sort(sortNumber).map(t => {
              if (item.itemCode === t.suppTab) {
                temp.isHas = t.flag;
                if (t.flag && !flag) {
                  // eslint-disable-next-line no-const-assign
                  activeKey = `${t.suppTab}`;
                  temp.isHas = false;
                  // eslint-disable-next-line prefer-destructuring
                  flag = t.flag;
                }
              }
            });
          });
          this.changeTabPane(activeKey);
        } else {
          // eslint-disable-next-line no-return-assign
          SUPPER_TAB.map(item => (item.isHas = false));
          this.setState({ SUPPER_TAB }, () => {
            this.getList(activeKey, pagination.current, pagination.pageSize);
          });
        }
      });
    });
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'supplier/updateModalData',
      payload: { formFieldsValue: {} },
    });
    form.resetFields();
    this.state.selectedRowKeys = [];
    this.state.selectedRows = [];
    const getFields = form.getFieldsValue();
    Object.keys(getFields).forEach(key => {
      form.resetFields([key]);
      this.setState({ [key]: null });
    });

    const { SUPPER_TAB } = this.state;
    SUPPER_TAB.map(item => {
      const tt = item;
      tt.isHas = false;
    });
    this.setState({ SUPPER_TAB });
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'supplier/updateModalData',
      payload: { expandForm: !expandForm },
    });
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { dispatch } = this.props;
    const { SUPPER_TAB } = this.state;
    dispatch({
      type: 'supplier/updateModalData',
      payload: { activeKey },
    });
    router.push({
      pathname: '/salemanage/supplier/index',
      query: {
        activeKey,
      },
    });
    SUPPER_TAB.forEach(item => {
      if (item.itemCode === activeKey) {
        item.isHas = false;
      }
    });
    this.getList(activeKey);
  };

  // 查看详情
  toDetail = (e, suppId) => {
    router.push(`/salemanage/supplier/detail?suppId=${suppId}`);
  };

  // 修改
  update = (e, suppId) => {
    router.push(`/salemanage/supplier/update?suppId=${suppId}`);
  };

  // 删除数据
  delList = suppId => {
    const {
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    this.setState({ selectedRowKeys: [suppId] });
    confirm({
      title: '你确定要删除这些供应商信息吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'supplier/idxDeleteMul',
          payload: { list: [suppId] },
        }).then(res => {
          if (res.success) {
            this.setState({ selectedRowKeys: [] });
            message.success('删除成功！');
            this.getList(activeKey, pagination.current, pagination.pageSize);
          } else {
            message.warning(`${res.message || '删除失败！'}`);
          }
        });
      },
    });
  };

  // 待启用-启用状态
  ableStatus = (suppId, flag) => {
    this.setState({ selectedRowKeys: [suppId] });
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    confirm({
      title: '你确定要启用这些供应商信息吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        const status = flag === 1 ? 2 : 1;
        dispatch({
          type: 'supplier/updateStatus',
          payload: { suppId, status },
        }).then(res => {
          if (res.success) {
            message.success(`${res.message || flag === 1 ? '启用成功！' : '停用成功！'}`);
            this.getList(activeKey, pagination.current, pagination.pageSize);
          } else {
            message.warning(`${res.message || flag === 1 ? '停用失败！' : '启用失败！'}`);
          }
        });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 停用-启用状态
  stopstartStatus = (suppId, flag) => {
    this.setState({ selectedRowKeys: [suppId] });
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    confirm({
      title: '你确定要启用这些供应商信息吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        const status = flag === 3 ? 2 : 3;
        dispatch({
          type: 'supplier/updateStatus',
          payload: { suppId, status },
        }).then(res => {
          if (res.success) {
            message.success(`${res.message || flag === 3 ? '启用成功！' : '停用成功！'}`);
            this.getList(activeKey, pagination.current, pagination.pageSize);
          } else {
            message.warning(`${res.message || flag === 3 ? '停用失败！' : '启用失败！'}`);
          }
        });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 停用
  updateStatus = (suppId, flag) => {
    this.setState({ selectedRowKeys: [suppId] });
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    confirm({
      title: '你确定要停用这些供应商信息吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        const status = flag === 2 ? 3 : 1;
        dispatch({
          type: 'supplier/updateStatus',
          payload: { suppId, status },
        }).then(res => {
          if (res.success) {
            message.success(`${res.message || flag === 3 ? '启用成功！' : '停用成功！'}`);
            this.getList(activeKey, pagination.current, pagination.pageSize);
          } else {
            message.warning(`${res.message || flag === 3 ? '停用失败！' : '启用失败！'}`);
          }
        });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    await this.resetSearch();
    await this.getList();
    const { dispatch } = this.props;
    dispatch({
      type: 'supplier/updateModalData',
      payload: { expandForm: false },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      supplierCode,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="供应商名称" {...this.formItemLayout}>
              {getFieldDecorator('suppId', {
                initialValue: formFieldsValue.suppId,
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  allowClear
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {supplierCode &&
                    supplierCode.map(item => (
                      <Option key={item.suppId} title={item.name}>
                        {item.name}
                      </Option>
                    ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="供应商编号" {...this.formItemLayout}>
              {getFieldDecorator('suppCode', {
                initialValue: formFieldsValue.suppCode,
              })(<Input placeholder="请输入" autoComplete="off" />)}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <span style={{ float: 'left', marginBottom: 24 }}>
                <Button type="primary" onClick={this.searchList}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  展开 <DownOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      dictCode,
      supplierCode,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="供应商名称" {...this.formItemLayout}>
              {getFieldDecorator('suppId', {
                initialValue: formFieldsValue.suppId,
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  allowClear
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {supplierCode &&
                    supplierCode.map(item => (
                      <Option key={item.suppId} title={item.name}>
                        {item.name}
                      </Option>
                    ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="供应商编号" {...this.formItemLayout}>
              {getFieldDecorator('suppCode', {
                initialValue: formFieldsValue.suppCode,
              })(<Input placeholder="请输入" autoComplete="off" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="供应商类型" {...this.formItemLayout}>
              {getFieldDecorator('type', {
                initialValue: formFieldsValue.type,
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  allowClear
                  showSearch
                  optionFilterProp="children"
                >
                  {dictCode &&
                    dictCode.SUPP_TYPE.map(item => (
                      <Option key={item.itemCode}>{item.itemName}</Option>
                    ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="服务状态" {...this.formItemLayout}>
              {getFieldDecorator('status', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.status,
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  allowClear
                  showSearch
                  optionFilterProp="children"
                >
                  {dictCode &&
                    dictCode.SUPP_STATUS.map(item => (
                      <Option key={item.itemCode}>{item.itemName}</Option>
                    ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24} />
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <span style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={this.searchList}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <UpOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { SUPPER_TAB, selectedRowKeys, SUPP_STATUS } = this.state;
    const { pageData, activeKey, loading ,
    } = this.props;
    const total = pageData && pageData.pagination.total;

    // 表格配置：行选择
    const rowSelection = {
      selectedRowKeys,
      onChange: (rows, selectedRows) => {
        this.setState({ selectedRowKeys: rows, selectedRows });
      },
    };

    // 表格配置：分页器
    const pagination = {
      defaultCurrent: pageData.pagination.current,
      defaultPageSize: pageData.pagination.pageSize, // 默认单页条数
      current: pageData.pagination.current, // 当前页
      pageSize: pageData.pagination.pageSize, // 单页条数
      total, // 数据总数
      showQuickJumper: true, // 跳转至某页
      showSizeChanger: true, // 是否可以改变 pageSize
      onChange: (page, pageSize) => {
        // 页码改变的回调
        this.getList(activeKey, page, pageSize, false);
      },
      onShowSizeChange: (current, size) => {
        // 单页条数变化的回调
        this.getList(activeKey, current, size, false);
      },
      showTotal: totals => {
        const totalPage =
          totals < pagination.pageSize ? 1 : Math.ceil(totals / pagination.pageSize);
        return `共 ${totals} 条记录 第 ${pagination.current} / ${totalPage}页`;
      },
    };

    const columns = [
      {
        title: '供应商编号',
        dataIndex: 'suppCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '供应商名称',
        dataIndex: 'name',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '统一社会信用代码',
        dataIndex: 'uniCreditCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '供应商类型',
        dataIndex: 'typeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'center',
        render: text => (text && text) || '--',
      },
      {
        title: '服务状态',
        dataIndex: 'status',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          SUPP_STATUS.map(status => {
            if (status.itemCode === `${val}`) {
              return (
                <Badge key={status.itemCode} status={status.statusStyle} text={status.itemName} />
              );
            }
          }),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <span>
            <a onClick={e => this.toDetail(e, record.suppId)}>查看</a>
          </span>
        ),
      },
    ];

    const columns2 = [
      {
        title: '供应商编号',
        dataIndex: 'suppCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '供应商名称',
        dataIndex: 'name',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '统一社会信用代码',
        dataIndex: 'uniCreditCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '供应商类型',
        dataIndex: 'typeName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && text) || '--',
      },
      {
        title: '服务状态',
        dataIndex: 'status',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          SUPP_STATUS.map(status => {
            if (status.itemCode === `${val}`) {
              return (
                <Badge key={status.itemCode} status={status.statusStyle} text={status.itemName} />
              );
            }
          }),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.status === 1) {
            return (
              <span>
                <a>
                  {record.status === 1 ? (
                    checkPermissions('business:supplier:updateStatus') && (
                      <span onClick={() => this.ableStatus(record.suppId, record.status)}>
                        启用
                      </span>
                    )
                  ) : (
                    <span onClick={e => this.toDetail(e, record.suppId)}>查看</span>
                  )}
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item key="look" onClick={e => this.toDetail(e, record.suppId)}>
                        查看
                      </Menu.Item>
                      {checkPermissions('business:supplier:update') && (
                        <Menu.Item key="update" onClick={e => this.update(e, record.suppId)}>
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('business:supplier:deleteMul') && (
                        <Menu.Item key="delete" onClick={() => this.delList(record.suppId)}>
                          {record.status === 1 ? '删除' : ''}
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a style={{ marginLeft: 8 }}>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.status === 2) {
            return (
              <span>
                <a>
                  {record.status === 1 ? (
                    checkPermissions('business:supplier:updateStatus') && (
                      <span onClick={() => this.ableStatus(record.suppId, record.status)}>
                        启用
                      </span>
                    )
                  ) : (
                    <span onClick={e => this.toDetail(e, record.suppId)}>查看</span>
                  )}
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('business:supplier:update') && (
                        <Menu.Item key="update" onClick={e => this.update(e, record.suppId)}>
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('business:supplier:updateStatus') && (
                        <Menu.Item onClick={() => this.updateStatus(record.suppId, record.status)}>
                          停用
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a style={{ marginLeft: 8 }}>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.status === 3) {
            return (
              <span>
                <a>
                  {record.status === 1 ? (
                    checkPermissions('business:supplier:updateStatus') && (
                      <span onClick={() => this.ableStatus(record.suppId, record.status)}>
                        启用
                      </span>
                    )
                  ) : (
                    <span onClick={e => this.toDetail(e, record.suppId)}>查看</span>
                  )}
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('business:supplier:updateStatus') && (
                        <Menu.Item
                          key="look"
                          onClick={() => this.stopstartStatus(record.suppId, record.status)}
                        >
                          启用
                        </Menu.Item>
                      )}

                      {checkPermissions('business:supplier:update') && (
                        <Menu.Item key="update" onClick={e => this.update(e, record.suppId)}>
                          修改
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a style={{ marginLeft: 8 }}>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
        },
      },
    ];

    const platformSupply = (
      <div>
        <Table
          rowSelection={rowSelection}
          dataSource={pageData && pageData.list}
          columns={columns}
          rowKey={record => record.suppId}
          pagination={pagination}
        />
      </div>
    );
    const selfSupply = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="business:supplier:insert" noMatch={null}>
            <Button
              type="primary"
              onClick={() => router.push('/salemanage/supplier/add')}
              style={{ marginRight: 20 }}
            >
              <PlusOutlined />
              新增
            </Button>
          </Authorized>
        </Row>
        <Table
          rowSelection={rowSelection}
          dataSource={pageData && pageData.list}
          columns={columns2}
          rowKey={record => record.suppId}
          pagination={pagination}
        />
      </div>
    );

    // 获取页签组件
    const getTabPane = activeKeys => {
      switch (activeKeys) {
        case '1':
          return platformSupply;
        case '2':
          return selfSupply;
        default:
          return <div />;
      }
    };

    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card className={styles.searchCard}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>
          </Card>
          <Card className={styles.tabCard}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {SUPPER_TAB.map(pane => (
                <TabPane tab={<Badge dot={pane.isHas}>{pane.itemName}</Badge>} key={pane.itemCode}>
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </Card>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
const ListSearchForm = Form.create()(BasicList);
export default ListSearchForm;
